<template lang="html">
  <section class="wrapper">
    <!-- 搜索 -->
    <search />
    <!-- 轮播 -->
    <banner :picList="picList"/>
    <!-- 栏目一 -->
    <mu-row class="btn-row">
      <mu-col class="btn blue" width="33" tablet="33" desktop="33">
        <router-link to="/demo/result">
          <p class="title">在线问院</p>
          <p class="tips">网上就医省心</p>
          <i class="iconfont icon-shouye13"></i>
        </router-link>
      </mu-col>
      <mu-col class="btn yellow" width="33" tablet="33" desktop="33">
        <router-link to="/demo/draw">
          <p class="title">智能关心</p>
          <p class="tips">智能健康设备</p>
          <i class="iconfont icon-icon37"></i>
        </router-link>
      </mu-col>
      <mu-col class="btn green" width="33" tablet="33" desktop="33">
        <p class="title">送药上门</p>
        <p class="tips">一小时送到家</p>
        <i class="iconfont icon-shouye32"></i>
      </mu-col>
    </mu-row>
    <!-- 栏目二 -->
    <mu-row class="info-card">
      <mu-col width="100" tablet="100" desktop="100">
        <!-- title -->
        <mu-flexbox justify="space-around" :gutter="0" class="info-title">
          <mu-flexbox-item class="info-title-label tl">
            健康服务
          </mu-flexbox-item>
          <mu-flexbox-item class="info-title-detail tr">
            <span class="font-secondary">多云30度</span>
            <span class="font-yellow">空气轻度污染103</span>
          </mu-flexbox-item>
        </mu-flexbox>
        <!-- body -->
        <div class="info-body yellow">
          <mu-flexbox align="flex-start">
            <mu-flexbox-item>
              <p class="tips1"><i class="iconfont icon-shouye19"></i>步数</p>
              <p class="tips2">今天15:17，IPhone同步</p>
            </mu-flexbox-item>
            <mu-flexbox-item>
              <p class="number tr">2333</p>
            </mu-flexbox-item>
          </mu-flexbox>
        </div>
      </mu-col>
    </mu-row>
    <!-- 栏目二 -->
    <mu-row class="live-box">
      <mu-col width="100" tablet="100" desktop="100">
        <!-- title -->
        <mu-flexbox justify="space-around" class="live-title">
          <mu-flexbox-item class="info-title-label tl">
            健康直播
          </mu-flexbox-item>
          <mu-flexbox-item class="live-title-detail tr font-green">
            更多<i class="iconfont icon-icon16"></i>
          </mu-flexbox-item>
        </mu-flexbox>
      </mu-col>
      <mu-col width="100" tablet="100" desktop="100">
        <slider :sliderList="sliderList"/>
      </mu-col>
    </mu-row>
    <!-- bottom-tab -->
    <bottom-tab curNav="index"/>
  </section>
</template>

<script>
import banner from '@/components/common/banner'
import slider from '@/components/common/slider'
import search from '@/components/common/search'
import bottomTab from '@/components/common/bottomTab'
export default {
  name: 'index',
  data() {
    return {
      picList: [
        {id: 1, src: "/static/images/1.jpg", name: "图片1", href: ""},
        {id: 2, src: "/static/images/2.jpg", name: "图片2", href: ""}
      ],
      sliderList: [
        {id: 1, color: "red", title: "测试测试测试测试测试测试测试活动1"},
        {id: 2, color: "blue", title: "直播活动2"},
        {id: 3, color: "green", title: "活动3"},
        {id: 4, color: "yellow", title: "活动4"}
      ]
    }
  },
  components: {
    banner,
    slider,
    search,
    bottomTab
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
.wrapper {
  background-color: $grey;
  margin-bottom: 56px;
}
.carousel {
  background-color: $white;
  img {
    height: 3rem;
  }
}
$colors: (red: $red, blue: $blue, green: $green, yellow: $yellow);
@mixin setColor {
  @each $key, $value in $colors {
    &.#{$key} {
      .title {
        color: $value;
      }
      .iconfont {
        color: $value;
      }
    }
  }
}
.btn-row {
  background-color: $white;
  margin-bottom: px2rem(38);
  .btn {
    text-align: center;
    border-right: px2rem(1) solid $grey;
    &:last-child {
      border-right: none;
    }
    .title {
      color: $default;
      font-size: px2rem(28);
      padding: 0;
      margin: px2rem(28) auto px2rem(18);
    }
    .tips {
      color: $secondary;
      font-size: px2rem(24);
      padding: 0;
      margin: 0 auto px2rem(20);
    }
    .iconfont {
      display: block;
      margin: 0 auto;
      color: $default;
      font-size: px2rem(90);
      padding: 0;
      line-height: 1;
    }
    @include setColor;
  }
}
.info-card {
  background-color: $white;
  margin-bottom: px2rem(38);
  padding-bottom: px2rem(20);
  .info-title {
    height: px2rem(90);
    line-height: px2rem(90);
    padding: 0 px2rem(30);
    font-size: px2rem(28);
  }
  .info-body {
    padding: 0 px2rem(30);
    box-sizing: border-box;
    background-color: $grey;
    p {
      padding: 0;
      margin: 0;
    }
    .tips1 {
      font-size: px2rem(36);
      margin-top: px2rem(16);
      margin-bottom: px2rem(20);
      .iconfont {
        margin: 0 auto;
        color: $green;
        font-size: px2rem(36);
        display: inline-block;
        text-align: center;
        margin-right: px2rem(10);
        border-radius: 50%;
        background-color: #94e700;
        width: px2rem(50);
        height: px2rem(50);
        box-shadow: 0 0 px2rem(5) $white;
        vertical-align: top;
      }
    }
    .tips2 {
      font-size: px2rem(20);
    }
    .number {
      font-size: px2rem(50);
      line-height: 1;
    }
    &.yellow {
      background-color: lighten($yellow, 35%);
      .tips1 {
        color: $yellow;
      }
      .tips2 {
        color: lighten($yellow, 10%);
        margin-bottom: px2rem(20);
      }
      .number {
        color: $yellow;
        margin-top: px2rem(16);
      }
    }
  }
}
.live-box {
  background-color: $white;
  .live-title {
    height: px2rem(90);
    line-height: px2rem(90);
    padding: 0 px2rem(30);
    font-size: px2rem(28);
  }
}
</style>
